import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Input,
    Layout,
    Button,
    Loading
} from './../../components';

import {
    Actions
} from 'react-native-router-flux';

interface Props {}

interface State {
    password: string,
    newPassword: string
}

import ajax from './../../http';
import * as Const from './../../const';
import * as saveLog from './../../utils/saveLog';

class Password extends PureComponent <Props, State> {

    state = {
        password: ``,
        newPassword: ``
    }

    private _onPasswordChange = (val:string) => {
        this.setState({
            password: val
        })
    }

    private _onNewPasswordChange = (val:string) => {
        this.setState({
            newPassword: val
        })
    }

    get disabled() {
        const {
            password,
            newPassword
        } = this.state;
        return !password || !newPassword;
    }

    private _onSubmit = async () => {
        const {
            password,
            newPassword
        } = this.state;

        const _para = {
            oldPassword: password,
            newPassword: newPassword
        }
        Loading.show()
        try {
            await ajax.put(
                `user/password`, _para
            )
            await saveLog.update({
                password:newPassword
            })
            Actions.pop();
            Tip.success({
                message: `Change password successful.`
            })
        }
        catch (e) {
            Tip.warm({
                message: e.message
            })
        }
        Loading.close()
    }


    private toForgot = async () => {
        Actions.push(`/user/forgot`)
    }

    render() {
        const {
            password,
            newPassword
        } = this.state;

        return (
            <Layout title="Change Password">
                <View style={styles.container}>
                    <View style={styles.rowStyle}>
                        <Input
                            type="password"
                            value={password}
                            placeholder="Current password"
                            onChange={this._onPasswordChange}
                        />
                    </View>
                    <View style={styles.rowStyle}>
                        <Input
                            type="password"
                            value={newPassword}
                            placeholder="New password"
                            onChange={this._onNewPasswordChange}
                        />
                    </View>
                    <View style={styles.footer}>
                        <Button
                            title="Submit"
                            disabled={this.disabled}
                            onPress={this._onSubmit}
                        />
                    </View>
                    <View style={styles.forgotView}>
                        <Text style={styles.text}>
                            Forgot password?
                        </Text>
                        <Text
                            style={styles.here}
                            onPress={this.toForgot}
                        >
                            Click here
                        </Text>
                    </View>
                </View>
            </Layout>
        )
    }
}

export default Password;

const styles = StyleSheet.create({
    container: {
        paddingHorizontal:24,
        paddingVertical: 24
    },
    rowStyle: {
        marginBottom: 16
    },
    footer: {
        paddingVertical: 40
    },
    iconStyle:{
        marginRight:8
    },
    forgotView:{
        justifyContent:`center`,
        alignItems:`center`,
        flexDirection:`row`
    },
    text:{
        color:`#8A92AE`
    },
    here:{
        fontSize:14,
        color:Const.color,
        fontWeight:`700`,
        paddingLeft:6,
        textDecorationLine:'underline'
    }
}) as any;